import React, { memo, useEffect, useState } from 'react';
import { useSelector, shallowEqual, useDispatch } from 'react-redux';

import { singerAlphas } from "@/utils/handle-category";
import { formatImageSize } from "@/utils/format-utils";
import { getArtistListAction } from "../../store/actionCreators";

import ThemeHeaderNormal from "@/components/theme-header-normal";
import { ArtistListWrapper, AlphaWrapper, ListWrapper } from "./style";

const ArtistList = memo(() => {
  const [currentAlpha, setCurrentAlpha] = useState("-1");
  const { currentArea, currentType, artistList } = useSelector(state => ({
    currentArea: state.getIn(["artist", "currentArea"]),
    currentType: state.getIn(["artist", "currentType"]),
    artistList: state.getIn(["artist", "artistList"])
  }), shallowEqual);
  const dispatch = useDispatch();
  
  /**category切换重置 */
  useEffect(() => {
    setCurrentAlpha("-1");
  }, [currentType, currentArea]);

  useEffect(() => {
    dispatch(getArtistListAction(currentArea, currentType.type, currentAlpha));
  }, [dispatch, currentArea, currentType, currentAlpha])

  // currentArea !== -1 当前点击左侧分类不是推荐时：martop、展示字母
  return (
    <ArtistListWrapper>
      <ThemeHeaderNormal title={currentType.name} />

      {/* 字母列表 */}
      <AlphaWrapper hasTop={currentArea !== -1}>
        {
          currentArea !== -1 && singerAlphas.map(item => {
            const renderText = item === "-1" ? "热门" : item === "0" ? "其它" : item;
            const clN = currentAlpha === item ? "item active" : "item";

            return (
              <div 
                key={item}
                className={clN}
              >
                <span 
                  className="link"
                  onClick={e => setCurrentAlpha(item)}
                >
                  {renderText}
                </span>
              </div>
            )
          })
        }
      </AlphaWrapper>
      
      {/* 歌手列表 */}
      <div className="artist-list">
        {
          artistList.map((item, index) => {
            return (
              <ListWrapper key={item.id} hasSpace={index < 10}>
                {
                  index < 10 && (
                    <div className="image">
                      <img src={formatImageSize(item.img1v1Url, 130)} alt="" />
                    </div>
                  )
                }
                
                <div className="info">
                  <span className="link text-nowrap">
                    {item.name}
                  </span>
                  <i className="sprite_icon2 icon"></i>
                </div>
              </ListWrapper>
            )
          })
        }
      </div>
    </ArtistListWrapper>
  )
})

export default ArtistList;